<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            color: blue;
            text-decoration: underline;
        }
    </style>
    <script src="../vue.global.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        const TodoList = {
            template:`
            <h3>TodoList</h3>
            <form @submit.prevent="addItem">
                <input value="hello" v-model="userInput"/>
                <button>add</button>
            </form>
            <ul>
                <todo-item v-for="(item,index) of todos" :todo="item" @remove="deleteItem(index)"></todo-item>
            </ul>
            `,
            data(){
                return {
                    userInput:"哥是数据",
                    todos:[
                        {id:1,title:"安装VSCode插件"},
                        {id:2,title:"安装Git"},
                        {id:3,title:"克隆项目代码"},
                    ]
                }
            },
            methods:{
                addItem(){
                    console.log("addItem",this.userInput);
                    this.todos.unshift({id:this.todos.length,title:this.userInput})
                },
                deleteItem(index){
                    // console.log("deleteItem",index,this.todos);
                    this.todos.splice(index,1)
                }
            }
        }

        const app = Vue.createApp(TodoList)

        app.component(
            "todo-item",
            {
                template:`
                <li>
                    {{todo.title}}
                    <a @click="onItemClick">狗带</a>
                </li>`,

                props:["todo"],

                emits:["remove"],

                methods:{
                    onItemClick(){
                        this.$emit("remove")
                    }
                }
            }
        )

        app.mount("#app")
    </script>
</body>
</html>